<template>
  <div>
    <el-dialog title="账单详情"
               :visible.sync="isShow"
               destroy-on-close
               center
               :before-close="modalClose">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            交易单号：{{ info.transactionNo }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            商户单号：{{ info.merchantOrderNo }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            创建时间：{{ info.createTimeFormatter }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            交易类型：{{ info.transactionType }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            交易对方：{{ info.otherParty }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            商品名称：{{ info.goodsName }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            金额：{{ info.amountFormatter }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            收/支：{{ info.chargeTypeFormatter }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            状态：{{ info.stateFormatter }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            状态描述：{{ info.stateDesc }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            账单类型：{{ info.billTypeFormatter }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            手续费：{{ info.serviceFeeFormatter }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            退款金额：{{ info.refundAmountFormatter }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            账单备注：{{ info.remark }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            用户备注：{{ info.userRemark }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            自定义分类：{{ info.category }}
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import getInfo from "../api/getInfo";

export default {
  name: "BillInfo",
  props: {
    id: {
      type: String
    },
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      info: {}
    }
  },
  methods: {
    modalClose(done) {
      this.$emit('billInfoClose');
      done();
    },
    async setInfo() {
      if (this.id) {
        let res = await getInfo(this.id);
        if (res.success) {
          this.info = res.data
        }
      }
    }
  },
  computed: {
    isShow: {
      get() {
        return this.visible;
      },
      set() {

      }
    }
  },
  mounted() {
    this.setInfo();
  }
}
</script>

<style scoped lang="less">


.el-col {
  margin-bottom: 5px;
}



</style>
